<template>
  <div>
        <div v-for="(item,index) in caddress"  :key="index" >
            <el-form-item label=""  >
                <el-select  style="width: 120px" v-model="item.province"  @change="choseProvince($event,true,index)" placeholder="请选择省" >
                    <el-option v-for="item in provinceDataList" :key="item.id" :label="item.value" :value="item.id" ></el-option>
                </el-select>
                <el-select  style="width: 450px" multiple v-model="item.city" placeholder="请选择市" >
                    <el-option v-for="item in getCityArray(item.province)" :key="item.id" :label="item.value" :value="item.id" ></el-option>
                </el-select>
                <el-button   size="mini" @click.native="removeColumn(index)" v-if="index !=0" type="danger">移除</el-button>
            </el-form-item>
        </div>
  </div>
</template>

<script>
    import provinceCity from "@/assets/map/provinceCity.json";

    export default {
        name: 'li_area_selectArray',
        model: {
            prop: 'caddress',
            event: 'change',
        },
        props: {
            caddress: {
                type: Array,
            },
        },
        data() {
            return {
                provinceDataList: [], //【数据源】---省份数据
                cityDataList: [], //【数据源】---市数据
                areaDataList: [], //【数据源】---区数据
                cityDataListArray: [], //【数据源】---市数据
                areaDataListArray: [], //【数据源】---区数据
            }
        },
        methods: {
            //初始化省市区数据
            initAreaData: function () {
                this.province = [];
                this.city = [];
                this.block = [];
                // 省市区数据分类
                for (var item in provinceCity) {
                    if (item.match(/0000$/)) {
                        //省
                        this.provinceDataList.push({
                            id: item,
                            value: provinceCity[item],
                            children: []
                        });
                    } else if (item.match(/00$/)) {
                        //市
                        this.cityDataList.push({
                            id: item,
                            value: provinceCity[item],
                            children: []
                        });
                    }
                }
                // 分类市级
                for (let i in this.provinceDataList) {
                    for (let j in this.cityDataList) {
                        let provinceObj_ = this.provinceDataList[i];
                        let cityObj_ = this.cityDataList[j];
                        if (provinceObj_.id.slice(0, 2) === cityObj_.id.slice(0, 2)) {
                            provinceObj_.children.push(cityObj_);
                        }
                    }
                }
            },

            //选择省份操作
            choseProvince(e, flag,indexColum) {
                if (flag) {
                    this.caddress[indexColum].city = [];
                }
               /* for (var index in this.provinceDataList) {
                    if (e === this.provinceDataList[index].id) {
                        //城市、区域数据源赋值
                        this.cityDataListArray = this.provinceDataList[index].children;
                    }
                }*/
            },
            getCityArray(province){
              if(province){
                  for (var index in this.provinceDataList) {
                      if (province === this.provinceDataList[index].id) {
                          //城市、区域数据源赋值
                          return  this.provinceDataList[index].children;
                      }
                  }
              }else{
                  return [];
              }
            },
            removeColumn(index){
                this.caddress.splice(index, 1);
            }
        },
        created() {
            this.initAreaData();

        },
    }
</script>


<style scoped>

</style>
